<template>
	<view class="content" @slide="onSlide">
		<Home v-if="currentTabbar===0"></Home>
		<Class v-if="currentTabbar===1"></Class>
		<Shop v-if="currentTabbar===2"></Shop>
		<My v-if="currentTabbar===3"></My>
		
		<tn-tabbar v-model="currentTabbar" fixed>
			<tn-tabbar-item
			  v-for="(item, index) in tabbarData"
			  :key="index"
			  :icon="item.icon"
			  :active-icon="item.activeIcon"
			  :text="item.name"
			   @click="onSwitch"
			  :badge = "item.badge"
			  :active-color="mainColor"
			></tn-tabbar-item>
		</tn-tabbar>
	</view>
</template> 

<script setup>
	import { ref,watch,onMounted,computed,reactive   } from 'vue'
	import { postNoCall  } from '@/api/index.js'
	import Home from '@/pages/home/home.vue'
	import Class from '@/pages/classify/classify.vue'
	import Shop from '@/pages/shop/shop.vue'
	import My from '@/pages/my/my.vue'
	import {userAllDataStore} from '@/stores'
	const store = userAllDataStore();
	const shopingBadge = computed(()=>store.state.shopingBadge)
	
	
	const currentTabbar = ref(0)
	let mainColor = ref("#6bb7ec");
	// // 导航栏数据
	const tabbarData = reactive([
	  {
	    name: '首页',
	    icon: 'home',
	    activeIcon: 'home-fill',
	  },
	  {
	    name: '分类',
	    icon: 'menu-circle',
	    activeIcon: 'menu-circle-fill',
	  },
	  {
	    name: '购物车',
	    icon: 'cart',
	    activeIcon: 'cart-fill',
		badge:shopingBadge
	  },
	  {
	    name: '我的',
	    icon: 'my-formal',
	    activeIcon: 'my-formal-fill',
	  },
	])
	let onSlide = () =>{
		uni.navigateBack();
	}
	let doGetConfig = () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_CONFIG";
		params["P_ACTION"] = "CONFIG";
		postNoCall(params).then(res=>{
			if(res && res.code === 200){
				mainColor.value = res.data?.DATASET[0]?.maincolor ?? "#6bb7ec" ;
				uni.setStorageSync("MCOLOR", res.data?.DATASET[0]?.maincolor ?? "#6bb7ec");
			}
		})
	}
	onMounted(()=>{ 
		doGetConfig();
		setTimeout(() => {
		    let index = uni.getStorageSync('index') ;
		    if (index !== undefined) {
		 	   currentTabbar.value = index;
		    }
		}, 100);
		
	})
	
	const onSwitch = (val) =>{
		uni.setStorageSync("index",currentTabbar.value)	
	}
</script>

<style scoped>
	page{
		height: 100vh;
	}
	.operate-class{
		height: calc( 100vh - 3.125rem ) ;
	}
	.content{
		height: 100vh;
	}
</style>
